import React from 'react'
import styled from 'styled-components'

const Flex = (props: Props) => {
	const { children, ...restProps } = props
	return <Container {...restProps}>{children}</Container>
}

const Container = styled.div`
	display: flex;
	flex: ${({ auto }) => (auto ? '1 1 auto' : 'initial')};
	flex-direction: ${({ column }) => (column ? 'column' : 'row')};
	align-items: ${({ align, center }) => (center ? 'center' : align)};
	justify-content: ${({ justify, center }) => (center ? 'center' : justify)};
`

export default Flex



// WEBPACK FOOTER //
// ./src/components/Flex/index.js